<template>
  <div class="dorm-repair-container">
    <h2>宿舍报修</h2>
    
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>报修申请</span>
            </div>
          </template>
          
          <el-form :model="repairForm" :rules="rules" ref="repairForm" label-width="120px">
            <el-form-item label="宿舍号" prop="dormNumber">
              <el-input v-model="repairForm.dormNumber" placeholder="请输入宿舍号，例如：A1-101"></el-input>
            </el-form-item>
            
            <el-form-item label="报修类型" prop="repairType">
              <el-select v-model="repairForm.repairType" placeholder="请选择报修类型" style="width: 100%">
                <el-option label="水电维修" value="水电维修"></el-option>
                <el-option label="家具维修" value="家具维修"></el-option>
                <el-option label="网络维修" value="网络维修"></el-option>
                <el-option label="门窗维修" value="门窗维修"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="故障描述" prop="description">
              <el-input 
                v-model="repairForm.description" 
                type="textarea" 
                :rows="4" 
                placeholder="请详细描述故障情况，例如：水龙头漏水严重，无法关闭">
              </el-input>
            </el-form-item>
            
            <el-form-item label="紧急程度">
              <el-radio-group v-model="repairForm.urgency">
                <el-radio label="一般">一般</el-radio>
                <el-radio label="紧急">紧急</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="联系方式">
              <el-input v-model="repairForm.contact" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="submitRepair">提交报修</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>报修须知</span>
            </div>
          </template>
          
          <div class="instructions">
            <h4>报修注意事项：</h4>
            <ol>
              <li>请准确填写宿舍号，便于维修人员快速定位</li>
              <li>详细描述故障情况，有助于维修人员准备工具</li>
              <li>提交后请保持电话畅通，维修人员会联系您</li>
              <li>一般维修在24小时内完成，紧急维修6小时内响应</li>
              <li>维修完成后请及时进行评价</li>
            </ol>
            
            <h4>常见问题：</h4>
            <ul>
              <li><strong>Q:</strong> 提交报修后多久能处理？</li>
              <li><strong>A:</strong> 一般情况下24小时内会有工作人员联系您</li>
              <li><strong>Q:</strong> 如何查询报修进度？</li>
              <li><strong>A:</strong> 可在"报修记录"中查看处理状态</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="repair-history-card">
      <template #header>
        <div class="card-header">
          <span>报修记录</span>
          <el-button @click="refreshHistory">刷新</el-button>
        </div>
      </template>
      
      <el-table :data="repairHistory" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="报修单号" width="100"></el-table-column>
        <el-table-column prop="dormNumber" label="宿舍号" width="120"></el-table-column>
        <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
        <el-table-column prop="description" label="故障描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="submitTime" label="提交时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
            <el-button 
              v-if="scope.row.status === '已完成'" 
              size="small" 
              type="success" 
              @click="showEvaluation(scope.row)">
              评价
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
        class="pagination">
      </el-pagination>
    </el-card>
    
    <!-- 报修详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="报修详情" width="50%">
      <el-form :model="selectedRepair" label-width="100px">
        <el-form-item label="报修单号:">
          <span>{{ selectedRepair.id }}</span>
        </el-form-item>
        <el-form-item label="宿舍号:">
          <span>{{ selectedRepair.dormNumber }}</span>
        </el-form-item>
        <el-form-item label="报修类型:">
          <span>{{ selectedRepair.repairType }}</span>
        </el-form-item>
        <el-form-item label="故障描述:">
          <span>{{ selectedRepair.description }}</span>
        </el-form-item>
        <el-form-item label="提交时间:">
          <span>{{ selectedRepair.submitTime }}</span>
        </el-form-item>
        <el-form-item label="状态:">
          <el-tag :type="getStatusType(selectedRepair.status)">
            {{ selectedRepair.status }}
          </el-tag>
        </el-form-item>
        <el-form-item label="处理人员:">
          <span>{{ selectedRepair.handler || '暂无' }}</span>
        </el-form-item>
        <el-form-item label="处理时间:">
          <span>{{ selectedRepair.handleTime || '暂无' }}</span>
        </el-form-item>
        <el-form-item label="备注:">
          <span>{{ selectedRepair.remark || '暂无' }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 评价对话框 -->
    <el-dialog v-model="evaluationDialogVisible" title="服务评价" width="400px">
      <el-form :model="evaluationForm" label-width="80px">
        <el-form-item label="评分">
          <el-rate v-model="evaluationForm.rating" :max="5"></el-rate>
        </el-form-item>
        <el-form-item label="评价">
          <el-input 
            v-model="evaluationForm.comment" 
            type="textarea" 
            :rows="3" 
            placeholder="请对本次维修服务进行评价">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="evaluationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEvaluation">提交评价</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DormRepair',
  data() {
    return {
      repairForm: {
        dormNumber: '',
        repairType: '',
        description: '',
        urgency: '一般',
        contact: ''
      },
      rules: {
        dormNumber: [
          { required: true, message: '请输入宿舍号', trigger: 'blur' }
        ],
        repairType: [
          { required: true, message: '请选择报修类型', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入故障描述', trigger: 'blur' }
        ]
      },
      loading: false,
      repairHistory: [
        { 
          id: 'BX20241021001', 
          dormNumber: 'A1-101', 
          repairType: '水电维修', 
          description: '水龙头漏水严重，无法关闭', 
          submitTime: '2024-10-21 09:30:22', 
          status: '已完成',
          handler: '张师傅',
          handleTime: '2024-10-21 14:20:15',
          remark: '已更换水龙头'
        },
        { 
          id: 'BX20241020015', 
          dormNumber: 'B2-305', 
          repairType: '家具维修', 
          description: '桌椅松动，需要加固', 
          submitTime: '2024-10-20 16:45:10', 
          status: '处理中',
          handler: '李师傅',
          handleTime: '2024-10-21 10:30:00'
        },
        { 
          id: 'BX20241019022', 
          dormNumber: 'C3-208', 
          repairType: '网络维修', 
          description: '网络连接不稳定', 
          submitTime: '2024-10-19 11:20:35', 
          status: '待处理'
        }
      ],
      total: 100,
      pageSize: 10,
      currentPage: 1,
      detailDialogVisible: false,
      evaluationDialogVisible: false,
      selectedRepair: {},
      evaluationForm: {
        rating: 5,
        comment: ''
      }
    }
  },
  methods: {
    submitRepair() {
      this.$refs.repairForm.validate((valid) => {
        if (valid) {
          this.$message.success('报修申请提交成功，工作人员会尽快联系您！')
          this.resetForm()
        } else {
          this.$message.error('请完善报修信息')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.repairForm.resetFields()
    },
    refreshHistory() {
      this.loading = true
      // 模拟刷新数据
      setTimeout(() => {
        this.loading = false
        this.$message.success('刷新成功')
      }, 500)
    },
    handlePageChange(page) {
      this.currentPage = page
      this.loading = true
      // 模拟分页加载
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    getStatusType(status) {
      const statusMap = {
        '待处理': 'info',
        '处理中': 'warning',
        '已完成': 'success'
      }
      return statusMap[status] || 'info'
    },
    viewDetail(repair) {
      this.selectedRepair = repair
      this.detailDialogVisible = true
    },
    showEvaluation(repair) {
      this.selectedRepair = repair
      this.evaluationForm.rating = 5
      this.evaluationForm.comment = ''
      this.evaluationDialogVisible = true
    },
    submitEvaluation() {
      this.$message.success('评价提交成功，感谢您的反馈！')
      this.evaluationDialogVisible = false
    }
  }
}
</script>

<style scoped>
.dorm-repair-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instructions ol,
.instructions ul {
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 10px;
}

.repair-history-card {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>